<template>
  <li>
    <template v-if="!item.children?.length">
      <a
        class="dropdown-item"
        href="#"
        :class="{ active: activeCategoryId === item.query?.classId }"
        @click.prevent="$emit('select', item.query?.classId)"
      >
        {{ item.name }}
      </a>
    </template>
    <template v-else>
      <li class="dropdown-submenu">
        <a
          class="dropdown-item d-flex align-items-center"
          href="#"
          :class="{ active: isActive }"
          @click.prevent="toggleSubmenu"
        >
          {{ item.name }}
          <i class="fa fa-angle-right ms-auto small"></i>
        </a>
        <ul class="dropdown-menu submenu">
          <RecursiveMenuItem
            v-for="child in item.children"
            :key="child.query?.classId"
            :item="child"
            :active-category-id="activeCategoryId"
            @select="$emit('select', $event)"
          />
        </ul>
      </li>
    </template>
  </li>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';

const props = defineProps<{
  item: any;
  activeCategoryId: number | null;
}>();

defineEmits<{
  (e: 'select', id: number): void;
}>();

const isSubmenuOpen = ref(false);

const isActive = computed(() => {
  if (!props.item.children?.length) {
    return props.activeCategoryId === props.item.query?.classId;
  }
  return props.item.children.some(child => 
    child.query?.classId === props.activeCategoryId ||
    (child.children?.length && child.children.some(grandChild => 
      grandChild.query?.classId === props.activeCategoryId
    ))
  );
});

const toggleSubmenu = (event: Event) => {
  const target = event.currentTarget as HTMLElement;
  const dropdownMenu = target.nextElementSibling as HTMLElement;
  
  if (isSubmenuOpen.value) {
    dropdownMenu.style.display = 'none';
  } else {
    dropdownMenu.style.display = 'block';
  }
  
  isSubmenuOpen.value = !isSubmenuOpen.value;
};
</script>

<style lang="scss" scoped>
.dropdown-submenu {
  position: relative;

  > .dropdown-menu {
    top: 0;
    left: 100%;
    margin: 0;
    display: none;
  }

  &:hover > .dropdown-menu {
    display: block;
  }
}

.dropdown-item {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  padding: 0.5rem 1rem;
  
  &:hover, &.active {
    background: rgba(255, 215, 0, 0.1);
    color: #ffd700;
  }
}

.dropdown-menu {
  min-width: 160px;
  background: #1a1a1a;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0.25rem 0;

  // 递归增加子菜单的缩进
  .dropdown-item {
    padding-left: calc(1rem + 10px);
  }

  .submenu {
    .dropdown-item {
      padding-left: calc(1rem + 20px);
    }

    .submenu {
      .dropdown-item {
        padding-left: calc(1rem + 30px);
      }

      .submenu {
        .dropdown-item {
          padding-left: calc(1rem + 40px);
        }
      }
    }
  }
}

// 清除Bootstrap默认样式
.dropdown-toggle::after {
  display: none;
}

// 调整箭头图标大小
.fa-angle-right {
  font-size: 0.75rem;
  opacity: 0.5;
}
</style> 